<template>

  <el-card class="box-card" style="margin:0 auto">
    <div style="margin: 10px">
      <span id="titleTask" style="font-size: 30px;font-weight:500;cursor:pointer" @click="toTaskDetails()">
        {{ data.mandateTitle }}
      </span>
      <span style="float: right;font-size: 30px;font-weight:700;color: red">{{ data.salary }}/天</span>
    </div>
    <div style="margin: 10px">
      <p>{{ data.requirementsDescription }}</p>
      <div class="tag-group" v-if="data.skillsRequirements.length>0">
        <el-tag style="margin: 0 20px 0 0;width: 80px"
                v-for="item in data.skillsRequirements"
                :key="item">
          {{ item }}
        </el-tag>
      </div>

      <el-divider></el-divider>
      <div style="margin-top: 10px;">
        <el-avatar :size="50" :src="data.imgUrl" style="float: left"></el-avatar>
        <span style="margin-left:20px;font-size: 20px;font-weight:500;color: #007bff"> {{ data.isSuerName }}</span>
        <span style="float: right;font-size: 20px;font-weight:300">{{ data.createTime }}</span>
      </div>
    </div>
  </el-card>
</template>




<script>
export default {
  name: "TaskComponents",
  props: ['data'], methods: {
    toTaskDetails() {
      this.$emit('toTaskDetails', this.data.id)
    }
  }
}
</script>

<style scoped>
#titleTask:hover {
  color: #007bff;
}

</style>